<template>
  <div class="medium-import-button">
    <div style="display:flex;align-items: center;">
      <el-upload
        ref="elUpload"
        :multiple="false"
        :show-file-list="false"
        :http-request="uploadFileMethod"
        :before-upload="beforeUpload"
        :disabled="isDisabled || loading"
        :auto-upload="true"
        action
        class="medium-file-uploader"
      >
        <div v-if="showFile" :class="{'forbid-pointer': isDisabled}" class="import-btn">
          <i v-if="loading" class="el-icon-loading" style="margin-right:3px;"/>
          <el-tooltip v-if="fileNameCopy && fileNameCopy!==''" placement="top" effect="dark">
            <div slot="content" style="max-width: 200px;">{{ fileNameCopy }}</div>
            <div class="ellipsis cell-font-color">{{ fileNameCopy }}</div>
          </el-tooltip>
          <span v-else>{{ btnText }}</span>
          <!-- <span class="overflow" >{{ fileNameCopy && fileNameCopy!=='' ? fileNameCopy : btnText }}</span> -->
          <img :src="downloadIcon" style="width: 16px;height:16px;" alt="上传">
        </div >
        <div v-else>
          <i v-if="loading" class="el-icon-loading" style="margin-right:3px;"/>
          <img :src="downloadIcon" style="width: 16px;height:16px;" alt="上传">
        </div>
      </el-upload>
      <el-tooltip placement="top" effect="dark">
        <div slot="content">
          {{ clipType ? '剪贴板截图上传：点击后，使用粘贴快捷键上传（如：Ctrl+V）': '剪贴板截图上传：点击即可（首次需授权）' }}
        </div>
        <div :disabled="loading" class="clip-btn" @click="obtainClipbrd" @focus="onFocusClip" @blur="onBlurClip">
          <i class="el-icon-s-claim"/>
        </div>
      </el-tooltip>
    </div>
    <div v-if="fileNameCopy && fileNameCopy!==''" :class="{'forbid-pointer': isDisabled}" class="close-btn" @click="close"><i class="el-icon-error" /></div>
  </div>
</template>
<script>
import ImportList from '@/mixins/importList';
import uploadIcon from '@/assets/export.png';
import PasteClipboard from '@/mixins/pasteClipboard';
import downloadIcon from '@/assets/icon-upload-blue.png';

export default {
  name: 'BorderImportButton',
  mixins: [ImportList, PasteClipboard],
  props: {
    // 按钮文字
    btnText: {
      type: String,
      default: ''
    },
    // 控制是否显示成功和失败提示框
    hideConfirm: {
      type: Boolean,
      default: false
    },
    showFile: {
      type: Boolean,
      default: true
    },
    // 是否可以点击
    isDisabled: {
      type: Boolean,
      default: false
    },
    importApi: {
      type: String,
      default: () => {
        return '';
      }
    },
    getList: { // 导入后列表刷新的方法
      type: Function,
      default: null
    },
    initFileName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      uploadIcon, downloadIcon,
      isSealing: false,
      limitNum: false,
      fileName: '',
      fileNameCopy: '',
      isPasteAble: true
    };
  },
  watch: {
    initFileName(newValue, oldValue) {
      this.fileNameCopy = newValue;
    }
  },
  methods: {
    close() {
      if (this.isDisabled) return;
      this.fileNameCopy = '';
      this.$emit('clear');
    },
    pasteCallback(file) { // pasteClipboard
      if (this.beforeUpload(file)) this.uploadFileMethod({ file });
    }
  }
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.clip-btn {
    width: 32px;
    height: 32px;
    background-color: white;
    color: #406EFF;
    border: 1px solid #406EFF;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    margin-left: 10px;
    align-items: center;
    justify-content: center;
    &[disabled=disabled] {
      color: #a1b7ff;
      border: 1px solid #a1b7ff;
      cursor: not-allowed;
    }
  }
.overflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  // width: 100%;
  display: inline-block;
  text-align: left;
  line-height: 1.2;
}
.forbid-pointer {
  cursor: not-allowed !important;
}
.medium-import-button {
  display: flex;
  align-items: center;
  // .medium-file-uploader {
  //   width: 120px;
  //   height: 32px;
  // }
  .close-btn {
    cursor: pointer;
    margin-left: 10px;
    color: #999;
    font-size: 15px;
  }
  .import-btn {
    display: flex;
    height: 32px;
    align-items: center;
    color: #406EFF !important;
    width: 100%;
    max-width: 210px;
    border: 1px solid #406EFF;
    border-radius:4px;
    font-size: 14px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight: bold;
    padding: 0px 20px;
    img {
      width: 16px;
      height: 16px;
      margin-left: 5px;
      position: relative;
    }
  }
}
</style>
